<template>
	<transition name="el-fade-in-linear">
		<div class="imageMaskBox" v-show="isVisible">
			<div class="imageBoxMainBox">
				<div class="imageBoxHeaderBox">选择图库图片<i class="el-icon-close" @click="closeSelectImageBox"></i></div>
				<div class="imageBoxContentBox">
					<template v-for="fontItem in imageBoxData">
						<div class="imageBoxTitleBox">{{fontItem.cic_name}}</div>
						<div class="imageBoxItemBox" v-if="fontItem.arr.length>0">
							<template v-for="imgItem in fontItem.arr">
								<div class="imgItem" @click="SelectImageBoxValue(imgItem)">
									<img :src="imgItem.cil_url" />
								</div>
							</template>
						</div>
						<div class="imageBoxItemBox" style="padding: 0;" v-else>
							<div class="text">暂无内容</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	export default {
		name: 'SelectImageBox',
		props: {
			selectImageValue: {
				type: Function,
				required: true
			}
		},
		data() {
			return {
				isVisible: false,
				imageBoxData: []
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
				this.$myLoading.startLoading();
				this.$http.getHttp(
					this.$API.cmsgetImageInfo,
					rs => {
						this.$myLoading.endLoading();
						this.isVisible = true;
						this.imageBoxData = rs;
					}
				);
			},
			closeSelectImageBox(e) {
				e.preventDefault();
				this.isVisible = false;
			},
			SelectImageBoxValue(item) {
				this.isVisible = false;
				this.$emit('selectImageValue', item.cil_url);
			}
		}
	}
</script>

<style lang="stylus" scoped>

  .imageMaskBox {
        position fixed
        background rgba(0,0,0,0.5)
        left 0
        top 0
        bottom 0
        right 0
        z-index 99999999

        .imageBoxMainBox {
            position relative
            left 50%
            width 820px
            border 1px solid #ebeef5
            box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
            height 80%
            border-radius 4px
            background #fff 
            margin-left -400px
            margin-top 5%
            z-index 999
        }

        .imageBoxHeaderBox {
            width 100%
            height 50px   
            font-size 18px
            line-height 50px
            text-indent 15px

            i {
                float right
                margin-top 15px
                margin-right 15px
            }
        }

        .imageBoxContentBox {
            width 100%
            position absolute
            top 50px
            left 0px
            bottom 0px
            right 0px  
            overflow auto
        }

        .imageBoxTitleBox {
            height 40px
            line-height 40px   
            background #eee
            text-indent 15px
            font-size 14px
        }

        .imageBoxItemBox {
            width 100%
    		padding: 10px 0 0;
            height auto 
            display flex
            flex-wrap wrap
            justify-content flex-start

            .text {
	            width 100%
	            height 50px   
	            font-size 18px
	            line-height 50px
	            padding: 0 10px;
        	}
            .imgItem {
            	width: 31.33%;
			    margin: 0px 1% 10px;
			    float: left;
            	
            	img{
            		width: 100%;
            		height: 100%;
            		object-fit: cover;
            	}
        	}

        }
    }

</style>
